<template>
	<view>
		<view class="list-top">
			<text>{{navIndex==1?i18n.Cumulative_open_house:i18n.Cumulative_games}}</text>
			<view>{{total || 0}}</view>
		</view>
		<view class="nav-conten">
			<view @tap.stop="selectNav('0')" :class="{'active':navIndex==0}">{{i18n.Game_record}}</view>
			<view @tap.stop="selectNav('1')" :class="{'active':navIndex==1}">{{i18n.Room_record}}</view>
		</view>
		<template v-if="list.length>0">
			<block v-for="(item,index) in list" :key="index">
				<view class="list">
					<view class="list-l">
						<view>{{i18n.room_number}}:{{navIndex==1?item.id:item.room_id}}</view>
						<text>{{item.ctime}}</text>
					</view>
<!-- 					<view class="list-l">
						<view>{{item.num}} {{item.token_id}}</view>
						<text>中奖金额</text>
					</view> -->
					<view class="list-r">
						
						<text v-if="navIndex==0">{{item.status==1?i18n.Matching:item.status==2?i18n.Disband:(item.is_zj==1?i18n.Winning:i18n.Not_winning)}}</text>
						
						
						<view v-if="navIndex==0">{{item.num}} {{item.token_id}}</view>
						<text v-if="navIndex==1">{{item.status==1?i18n.Matching:item.status==2?i18n.Disband:i18n.Draw}}</text>
						<button @tap.stop="cancle(item)" v-if="item.status==1 && navIndex==1" hover-class="active">{{i18n.TransferOut}}</button>
					</view>
				</view>
			</block>
		</template>
		<template v-else>
			<view class="no-data">{{i18n.nodata}}</view>
		</template>
		<pay-pwd
		:maxlength="6" 
		:isPwd="true" 
		:isSHow="showpwd" 
		:isShows="isshows"
		:isShowss="showss"
		@close="close"
		@input-again="inputAgain"
		@finish="finish"></pay-pwd>
	</view>
</template>

<script>
	import {fetch, showToast, pageto, forceUpdate, check_login} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	import payPwd from '@/components/pay-pwd/pay-pwd.vue';
	export default {
		components:{payPwd},
		computed: {
			i18n() {
				return this.$t('message')
			},
			...mapGetters([
				'getRequestUrl',
				'getLang',
				'getLogin',
				'getLoginInfo'
			])
		},
		onReachBottom(){
			if(this.navIndex==1){
				this.getroom();
			}else{
				this.getRecord();
			}
		},
		data() {
			return {
				navIndex:0,
				total:0,
				page:1,
				list:[],
				isshows : false,
				showss : false,
				showpwd : false,
				cur:{}
			};
		},
		onShow(){
			
			uni.setNavigationBarTitle({
				title:this.getLang==1?'挖矿记录':'Mining record'
			})
			this.isshows = false;
			this.showss = false;
			this.showpwd = false;
			this.page=1;
			this.list = [];
			this.getRecord();
		},
		onReachBottom(){
			if(this.navIndex==1){
				this.getroom();
			}else{
				this.getRecord();
			}
		},
		methods:{
			close(val){
				if(val==1){
					this.isshows = false;
					this.showss = false;
					this.showpwd = false;
				}else{
					this.isshows = val;
					this.showpwd = val;
					this.showss = val
				}
			},
			inputAgain(val){
				this.isshows = false;
				this.showpwd = true;
			},
			finish(val){
				fetch(this.getRequestUrl+'/api/Game/diss_room',{id:this.getLoginInfo.id,token:this.getLoginInfo.token,room_id:this.cur.id,pay_pwd:val},"POST").then(res=>{
					showToast(res.data.msg)
					if(res.data.code==1){
						this.isshows = false;
						this.showss = false;
						this.showpwd = false;
						this.page=1;
						this.list = [];
						this.getroom();
						return
					}
					this.isshows = false;
					this.showss = false;
					this.showpwd = false;
					if(res.data.msg=='支付密码错误！'){
						this.isshows = true;
					}else if(res.data.msg=='usdt不足'){
						this.isshows = false;
						this.showpwd = false;
						this.showss = true;
					}
				})
				.catch(err=>{
					
				})
			},
			cancle(item){
				this.cur = item;
				this.showpwd  =true;
			},
			selectNav(index){
				this.navIndex = index;
				this.list =[];
				this.page=1;
				if(this.navIndex==1){
					this.getroom();
				}else{
					this.getRecord();
				}
			},
			getroom(){
				fetch(this.getRequestUrl+"/api/Game/room_list",{id:this.getLoginInfo.id,token:this.getLoginInfo.token,rows:10,page:this.page},'post')
					.then(res=>{
						if(res.data.code==1){
							this.total=res.data.data.total
							if(res.data.data.data.length==0)return;
							if(this.page==1){
								this.list = res.data.data.data;
							}else{
								this.list = this.list.concat(res.data.data.data)
							}
							this.page==1
						}
					})
			},
			getRecord(){
				fetch(this.getRequestUrl+"/api/Game/record_list",{id:this.getLoginInfo.id,token:this.getLoginInfo.token,rows:10,page:this.page},'post')
					.then(res=>{
						if(res.data.code==1){
							this.total=res.data.data.total
							if(res.data.data.data.length==0)return;
							if(this.page==1){
								this.list = res.data.data.data;
							}else{
								this.list = this.list.concat(res.data.data.data)
							}
							this.page==1
						}
					})
			}
		}
	}
</script>
<style>
	page{
		background: #f5f6f8 !important;
	}
</style>
<style lang="scss" scoped>
	.no-data{
		text-align: center; 
		font-size: 26rpx;
		color: #e3e3e3;
		padding: 40rpx 0;
	}
	.list-top{
		margin: 30rpx;
		background: linear-gradient(to right,#2E3A5A, #3C4C72);
		color: #FFFFFF;
		padding: 42rpx 0 66rpx 44rpx;
		border-radius: 20rpx;
		text{
			font-size: 24rpx;
		}
		view{
			font-size: 50rpx;
			font-weight: bold;
			line-height: 46rpx;
			margin-top: 20rpx;
		}
	}
	.nav-conten{
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		view{
			font-size: 30rpx;
			color: #CDD0D2;
			line-height: 110rpx;
			font-weight: lighter;
			&:first-of-type{
				margin-right: 40rpx;
			}
			&.active{
				font-weight: bold;
				color: #0D1020;
			}
		}
	}
	.list{
		margin: 20rpx 30rpx 0;
		background: #ffffff;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 36rpx;
		.list-l{
			view{
				font-size: 30rpx;
				color: #2C385C;
			}
			text{
				font-size: 26rpx;
				color: #CDD0D2;
			}
		}
		.list-r{
			text-align: right;
			view{
				font-size: 26rpx;
				color: #CDD0D2;
			}
			text{
				line-height: 60rpx;
				font-size: 30rpx;
				color: #2C385C;
			}
			button{
				margin-bottom: 15rpx;
				width: 120rpx;
				line-height: 36px;
				height: 36px;
				font-size: 26rpx;
				padding: 0;
				background: #24395e;
				color: #ffffff;
				&.active{
					opacity: .95;
					transform: scale(.95);
				}
			}
		}
	}
</style>
